<template>
  <div class="my-integral">
    <div class="my-integral-content">
      <div class="title">我的积分</div>
      <div class="integral-num">
        <div>{{integral}}</div>
      </div>
    </div>
    <div class="my-integral-list">
      <div class="title">积分记录</div>
      <div class="list-content" v-for="(item,index) in integralArr" :key="index">
        <div class="list-content-left">
          <div class="integral-type">{{item.integral_name}}</div>
          <div class="integral-data">{{item.created_at}}</div>
        </div>
        <div class="list-content-right"><span v-if="item.type == 0">+</span><span v-else>-</span>{{item.integral}}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      integral: '',
      integralArr: '',
    }
  },
  components:{
  },
  onShow(){
    this.getMySumIntegral();
    this.getMyIntegral();
  },
  methods:{
    //获取总积分
    async getMySumIntegral(){
      var userToken = wx.getStorageSync('userToken'); 
      let params = {
        user_token: userToken
      };
      let res = await this.$api.getMySumIntegral(params);
      if(res.data.level == "success"){
        this.integral = res.data.data;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //获取我积分记录
    async getMyIntegral(){
      var userToken = wx.getStorageSync('userToken'); 
      let params = {
        user_token: userToken
      };
      let res = await this.$api.getMyIntegral(params);
      if(res.data.level == "success"){
        this.integralArr = res.data.data;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    }
  },
}
</script>

<style lang="scss" scoped>
  .my-integral{
    padding:0 20rpx;
    min-height: 100vh;
    .my-integral-content{
      border-bottom: 1px solid #eaeaea;
      .title{
        height: 70rpx;
        line-height: 76rpx;
        border-bottom: 1px solid #eaeaea;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      .integral-num{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 250rpx;
      }
    }
    .my-integral-list{
      .title{
        height: 76rpx;
        line-height: 76rpx;
        border-bottom: 1px solid #eaeaea;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      .list-content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eeeeee;
        padding: 14rpx 0;
        .integral-type,
        .integral-data{
          font-size: 26rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
        }
      }
    }
  }
</style>